<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        v-if="~accessable.indexOf('report:sale_count_month')"
        :type="filters.type == 0 ? 'success' : 'info'"
        size="small"
        v-waves
        @click="month()"
      >按月统计</el-button>
      <el-button
        v-if="~accessable.indexOf('report:sale_count_day')"
        :type="filters.type == 1 ? 'success' : 'info'"
        size="small"
        v-waves
        @click="day()"
      >按日统计</el-button>
      <el-date-picker
        size="small"
        style="width: 200px;"
        class="filter-item"
        v-if="filters.type === 0"
        v-model="yearSelect"
        type="year"
        placeholder="选择年">
      </el-date-picker>
      <el-date-picker
        size="small"
        style="width: 200px;"
        class="filter-item"
        v-if="filters.type === 1"
        v-model="monthSelect"
        type="month"
        placeholder="选择年月">
      </el-date-picker>
      <el-button class="filter-item" size="small"  type="primary" v-waves icon="el-icon-search" @click="loadData">搜索</el-button>
    </div>

    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border=""
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column v-if="filters.type === 0" prop="month" align="center" label="月份" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.month}}</span>
        </template>
      </el-table-column>

      <el-table-column v-if="filters.type === 1" prop="day" align="center" label="日期" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.day}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="orderNum" align="center" label="交易量（不含退款）" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.orderNum}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="numRate" align="center" :label="filters.type === 0 ? '年度交易量比例' : '月度交易量比例'" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.numRate}}</span>%
        </template>
      </el-table-column>

      <el-table-column prop="orderAmount" align="center" label="交易额（不含退款）（￥）" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.orderAmount}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="amountRate" align="center" :label="filters.type === 0 ? '年度交易额比例比例' : '月度交易额比例比例'" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.amountRate}}</span>%
        </template>
      </el-table-column>

      <el-table-column prop="amount" align="center" label="微信（不含退款）（￥）" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.amount || 0}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="points" align="center" label="积分（不含退款）（个）" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.points || 0}}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-row :gutter="12" class="type">
      <el-col :span="6">
        <el-card shadow="always">
          <div class="card-txt">总交易量（不含退款）：{{totalOrderNum}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div class="card-txt">最高峰{{filters.type === 0 ? "月份" : "日期"}}交易量：￥ {{maxOrderNum}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div class="card-txt">总交易额（不含退款）：￥ {{totalOrderAmount}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div class="card-txt">最高峰{{filters.type === 0 ? "月份" : "日期"}}交易额：￥ {{maxOrderAmount}}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12" class="type">
      <el-col :span="6">
        <el-card shadow="always">
          <div class="card-txt">总微信金额（不含退款）：￥ {{totalAmount}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div class="card-txt">最高峰{{filters.type === 0 ? "月份" : "日期"}}微信金额：￥ {{maxAmount}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div class="card-txt">总积分（不含退款）：{{totalPoints}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div class="card-txt">最高峰{{filters.type === 0 ? "月份" : "日期"}}积分：{{maxPoints}} （个）</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      listLoading: false,
      tableHeight: 400,
      total: 0,
      yearSelect: '',
      monthSelect: '',
      totalOrderNum: 0,
      totalOrderAmount: 0,
      totalAmount: 0,
      totalPoints: 0,
      maxOrderNum: 0,
      maxOrderAmount: 0,
      maxAmount: 0,
      maxPoints: 0
    }
  },
  methods: {
    month () {
      if (this.listLoading) {
        return;
      }
      this.filters.type = 0;
      this.loadData();
    },
    day () {
      if (this.listLoading) {
        return;
      }
      this.filters.type = 1;
      this.loadData();
    },
    loadData(){
      this.listLoading = true;
      if (this.filters.type === 0) {
        if (this.yearSelect !== null && this.yearSelect !== ''){
          this.filters.year = this.dataFormat(this.yearSelect, "yyyy");
        } else {
          let getDate = new Date();
          this.filters.year = getDate.getFullYear();
        }
        this.$get('admin/business_report/sale_count/month', this.filters).then(data=>{
          this.listLoading = false;
          for (let i = 0; i < data.monthList.length; i++) {
            if (data.monthList[i].month < 10) {
              data.monthList[i].month = this.filters.year + '-0' + data.monthList[i].month;
            } else {
              data.monthList[i].month = this.filters.year + '-' + data.monthList[i].month;
            }
          }
          this.list = data.monthList;
          this.totalOrderNum = data.totalOrderNum;
          this.totalOrderAmount = data.totalOrderAmount;
          this.totalAmount = data.totalAmount;
          this.totalPoints = data.totalPoints;
          this.maxOrderNum = data.maxOrderNum;
          this.maxOrderAmount = data.maxOrderAmount;
          this.maxAmount = data.maxAmount;
          this.maxPoints = data.maxPoints;
        }).catch(_ => {
          this.listLoading = false;
          this.list = null;
        });
      }
      if (this.filters.type === 1) {
        if (this.monthSelect !== null &&  this.monthSelect !== ''){
          this.filters.year = this.dataFormat(this.monthSelect, "yyyy");
          this.filters.month = this.dataFormat(this.monthSelect, "MM");
        } else {
          let getDate = new Date();
          this.filters.year = getDate.getFullYear();
          this.filters.month = getDate.getMonth() + 1;
        }
        this.$get('admin/business_report/sale_count/day', this.filters).then(data=>{
          this.listLoading = false;
          for (let i = 0; i < data.dayList.length; i++) {
              if (data.dayList[i].day < 10) {
                if (this.filters.month < 10) {
                  data.dayList[i].day = this.filters.year + '-0' + this.filters.month + '-0' + data.dayList[i].day;
                } else {
                  data.dayList[i].day = this.filters.year + '-' + this.filters.month + '-0' + data.dayList[i].day;
                }
              } else {
                if (this.filters.month < 10) {
                  data.dayList[i].day = this.filters.year + '-0' + this.filters.month + '-' + data.dayList[i].day;
                } else {
                  data.dayList[i].day = this.filters.year + '-' + this.filters.month + '-' + data.dayList[i].day;
                }
              }
          }
          this.list = data.dayList;
          this.totalOrderNum = data.totalOrderNum;
          this.totalOrderAmount = data.totalOrderAmount;
          this.totalAmount = data.totalAmount;
          this.totalPoints = data.totalPoints;
          this.maxOrderNum = data.maxOrderNum;
          this.maxOrderAmount = data.maxOrderAmount;
          this.maxAmount = data.maxAmount;
          this.maxPoints = data.maxPoints;
        }).catch(_ => {
          this.listLoading = false;
          this.list = null;
        });
      }
    },
    dataFormat (value, fmt) {
      let getDate = new Date(value);
      let o = {
        'M+': getDate.getMonth() + 1,
        'd+': getDate.getDate(),
        'h+': getDate.getHours(),
        'm+': getDate.getMinutes(),
        's+': getDate.getSeconds(),
        'q+': Math.floor((getDate.getMonth() + 3) / 3),
        'S': getDate.getMilliseconds()
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt;
    }
  },
  created () {
    this.listLoading = true;
    this.filters.type = 0;
    this.loadData();
    this.tableHeight = window.innerHeight - 340
  }
}
</script>

<style>
.type {
  margin-top: 10px;
}
</style>